/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import Paused from '@/assets/AiImgs/paused.png';
import Start from '@/assets/AiImgs/start.png';
import { useDeviceState } from '@/lib/useCommon';
import { RootState } from '@/store';
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
const THRESHOLD_VOLUME = 18;
interface IProps {
  audio_url?: string;
  className?:any;
}
function AudioController(props:IProps) {
  const { className,audio_url, ...rest } = props;
  const dispatch = useDispatch();
  const [isStart,setIsStart]=useState(true)
  const room = useSelector((state: RootState) => state.room);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showSubtitles, setShowSubtitles] = useState(true);
  const audioRef = React.useRef<HTMLAudioElement>(null);
  const [currentTime, setCurrentTime] = useState(0);
  const [audioUrl,setAudioUrl]=useState<any>(audio_url)
  useEffect(()=>{
    setAudioUrl(audio_url)
  },[audio_url])
  const handleTimeUpdate = () => {
    if (audioRef.current) {
      setCurrentTime(audioRef.current.currentTime * 1000);
    }
  };
  return (
    <div className={`${className}`} {...rest}>
       <audio
              ref={audioRef}
              src={audioUrl}
              onTimeUpdate={handleTimeUpdate}
              onEnded={() => setIsPlaying(false)}
              style={{ display: 'none' }}
            />
        {isStart?<img className='w-7 h-7' src={Start} onClick={()=>setIsStart(false)}/>:<img className='w-7 h-7' onClick={()=>setIsStart(true)} src={Paused}/>}
        <div className='text-white mt-3 text-base'>{isStart?'开始':'暂停'}</div>
    </div>
  );
}
export default AudioController;
